<template>

  <div style="display: flex;flex-direction: column;height: 100%; position: relative;width: 99%;">
    <div class="watermark" id="watermark" :style="{'background-position': waterPosition}">
    </div>

    <HourChartView ref="hourChartView" />
    
    <calcParamSetting ref="calcParamSettingPage" 
      v-if="showIndicatorSettingModalParams"
      :indicatorSettingModalParams="indicatorSettingModalParams" 
      @closeIndicatorSetting="overideIndicatorParams"/>


    <a-modal :visible="indicatorSetting" title="指标设置" @ok="cancelIndicatorSetting" @cancel="cancelIndicatorSetting">
      <template #footer></template>
      <div class="inticator-list">
        <div class="inticator-label">
          <h2>主图指标</h2>
        </div>
        <div class="indicator" v-for="item in mainIndicator" :key="item">
          <a-checkbox @click="selectIndicator(item, false)" :checked="selectedMainIndicator.includes(item)">{{
            indicatorMap[item.toLowerCase()]}}</a-checkbox>
        </div>

        <div class="inticator-label">
          <h2>副图指标</h2>
        </div>
        <div class="indicator" v-for="item in subIndicator" :key="item">
          <a-checkbox @click="selectIndicator(item, true)" :checked="selectedSubIndicator.includes(item)">{{
            indicatorMap[item.toLowerCase()]}}</a-checkbox>
        </div>

      </div>
    </a-modal>

    <a-modal :visible="baseSetting" title="设置" @ok="cancelBaseSetting" @cancel="cancelBaseSetting">
      <template #footer>
          <a-button type="primary" @click="resetBaseSetting">恢复默认</a-button>
      </template>
      <div style="padding: 1em; display: flex;flex-direction: columns;flex-wrap: wrap;width: 100%;">
        <div v-for="item in settingItems" :key="item.key" style="display: flex; align-items: center;flex: 0 0 50%;margin: .5em 0">
          <div v-if="item.type=='switch'" >
            {{ item.name }}
            <Switch :checked="item.value"  @change="changeSettingStatus(item)" :title="item.key"></Switch>
          </div>
          <div v-if="item.type=='select'">
            {{ item.name }}
            <a-select width="200" :value="item.value"
            :options="item.options"
            @change="changeSettingStatus">
            </a-select>
          </div>
        </div>
      </div>
    </a-modal>

    <!--  -->
    <div style="height: 100%;flex-direction: column;" class="flex">
      <div style="display: flex;border: 1px solid #f1f1f1;height: 55px;line-height: 55px;padding: 0 .5em;">
        <caret-left-outlined title='点击返回' style="cursor:pointer; line-height: 24px;margin-top: 12px; color: #666;
          margin-right: .5em;" @click="hideStockPaneEvent"/>
        <a-avatar class="stock-logo" style="" :src="currentStock.logo" :title="currentStock.stockName "/>
        <span class="stock-name-area">{{ currentStock.stockName }}</span>
        <div class="k-line-name"></div>
        <div class="period">
          <span :class="{active: currentPeriod=='Day'}" @click="switchPeriod('Day')">日</span>
          <span :class="{active: currentPeriod=='Week'}" @click="switchPeriod('Week')">周</span>
          <span :class="{active: currentPeriod=='Month'}" @click="switchPeriod('Month')">月</span>
        </div>
        <div class="setting-splitter"></div>

        <div style="display: flex; margin-left:.5em;">
          <span class="flex addUserStock" @click="addStock2SelfPageEvent" v-if="!stockInZixuanStatus"
              style="flex-direction: row;justify-content: center;align-items: center;cursor: pointer;" title="加自选">
              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="000000"
                version="1.1" width="20" height="20" viewBox="0 0 24 24">
                <defs>
                  <clipPath id="master_svg0_1457_13242">
                    <rect x="0" y="0" width="24" height="24" rx="0" />
                  </clipPath>
                </defs>
                <g clip-path="url(#master_svg0_1457_13242)">
                  <g>
                    <rect x="17" y="18" width="5" height="1" rx="0.5" fill-opacity="1" />
                  </g>
                  <g transform="matrix(0,1,-1,0,36,-4)">
                    <rect x="20" y="16" width="5" height="1" rx="0.5" fill-opacity="1" />
                  </g>
                  <g transform="matrix(1,0,0,-1,0,40)">
                    <path
                      d="M12,34.0171L13.048,35.122Q14.5295,36.683800000000005,16.6325,36.683800000000005Q18.7354,36.683800000000005,20.2169,35.122Q21.6838,33.5755,21.6838,31.3955Q21.6838,29.215519999999998,20.2169,27.66902L13.2217,20.294281Q12.72365,19.769253,12,19.769253Q11.27635,19.769253,10.77834,20.294281L3.783077,27.66902Q2.316174,29.215519999999998,2.316174,31.3955Q2.316174,33.5755,3.783087,35.122Q5.26459,36.683800000000005,7.36755,36.683800000000005Q9.47052,36.683800000000005,10.951979999999999,35.122L12,34.0171ZM16.6325,35.3162Q15.1173,35.3162,14.0403,34.1808L12.49614,32.5528Q12.40253,32.4542,12.27828,32.3988Q12.15403,32.3434,12.01805,32.3399Q11.88208,32.3363,11.75508,32.385Q11.62808,32.4337,11.5294,32.5273Q11.51629,32.539699999999996,11.50386,32.5528L9.959710000000001,34.1808Q8.88275,35.3162,7.36755,35.3162Q5.8523499999999995,35.3162,4.77534,34.1808Q3.683826,33.03,3.683826,31.3955Q3.683826,29.76097,4.7753499999999995,28.61023L11.77061,21.23549Q11.86412,21.13691,12,21.13691Q12.13588,21.13691,12.22939,21.23549L19.2247,28.61023Q20.3162,29.76098,20.3162,31.3955Q20.3162,33.03,19.2247,34.1808Q18.1477,35.3162,16.6325,35.3162Z"
                      fill-rule="evenodd" fill-opacity="1" />
                  </g>
                </g>
              </svg>
              <span class="add-selec-stock-label">加自选</span>
            </span>
            
            <span class="flex deleteUserStock" v-if="stockInZixuanStatus" @click="deleteStock2SelfPageEvent"
              style="flex-direction: row;justify-content: center;align-items: center;cursor: pointer;" title="删自选">
              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#333333"
                version="1.1" width="20" height="20" viewBox="0 0 24 24" class="flex">
                <defs>
                  <clipPath id="master_svg0_1457_13402">  
                    <rect x="0" y="0" width="24" height="24" rx="0" />
                  </clipPath>
                </defs>
                <g clip-path="url(#master_svg0_1457_13402)">
                  <g>
                    <rect x="17" y="18" width="5" height="1" rx="0.5" fill-opacity="1" />
                  </g>
                  <g transform="matrix(1,0,0,-1,0,40)">
                    <path
                      d="M12,33.0234L10.45584,34.6514C8.75023,36.4495,5.98489,36.4495,4.27921,34.6514C2.573596,32.8532,2.573596,29.93779,4.27921,28.13963L11.27447,20.764886C11.66882,20.349144,12.33118,20.349144,12.72553,20.764886L19.7208,28.13963C21.4264,29.93779,21.4264,32.8532,19.7208,34.6514C18.0151,36.4495,15.2498,36.4495,13.5442,34.6514L12,33.0234Z"
                      fill-opacity="1" />
                  </g>
                </g>
              </svg>
              <span class="remove-selec-stock-label">删自选</span>
            </span>
        </div>
        <div class="k-line-setting " style="margin-left: auto; display: flex;">
          <a-button type="default" :size="settingIconSize" @click="openIndicatorSetting">
            <template #icon><LineChartOutlined /></template>
            指标
          </a-button>
          <a-button type="default" :icon="h(SettingOutlined)" :size="settingIconSize" @click="openBaseSetting">设置</a-button>
          <a-button type="default" :icon="h(CameraOutlined)" :size="settingIconSize" @click="screenShotEvent">截屏</a-button>
          <a-button type="default" :icon="h(InsertRowRightOutlined)" :size="settingIconSize" @click="openDrawer">侧栏</a-button>
        </div>
      </div>
  
      <div class="flex" style="position: relative;height: 100%;flex-direction: column;">
      <div :style="{'display': 'flex','flex-direction': 'row', 
        'flex':showBottomFinacePane? 4 : 1, 'width': '100%', 
        'border-bottom': '1px solid #e5e5e5'}">
        <div style="margin:0 auto; position: absolute; top:48%;left:48%;">
          <Spin :spinning="dataLoading" size="large"/>
        </div>
        <div id="chart" style="height:98%;width: 100%;display: flex;"></div>
      </div>
      
      <div style="padding: .5em;display: flex;">
          <button :class="{'chart-bottom-btn':true, 'active': bottomPane=='rs'&&showBottomFinacePane}" @click="switchBottomPane('rs')">个股板块强弱对比</button>
          <button :class="{'chart-bottom-btn':true, 'active': bottomPane=='fs'&&showBottomFinacePane,'finace-pane':true}" @click="switchBottomPane('fs')" style="margin-left: .5em;">财务指标</button>
          <div class="flex" style="flex-direction: row;cursor: pointer;margin-left: auto; margin-top:.5em;" @click="toggleBottomFinacePane">
              <svg class="flex" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="24" height="24" viewBox="0 0 24 24"><defs><clipPath id="master_svg0_1379_03490"><rect x="0" y="0" width="24" height="24" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_1379_03490)"><g><path d="M4.4,17.3333L4.4,6.66667Q4.4,5.31357,5.356784,4.356784Q6.31357,3.4,7.66667,3.4L18.3333,3.4Q19.6864,3.4,20.6432,4.356784Q21.6,5.31357,21.6,6.66667L21.6,17.3333Q21.6,18.6864,20.6432,19.6432Q19.6864,20.6,18.3333,20.6L7.66667,20.6Q6.31357,20.6,5.356784,19.6432Q4.4,18.6864,4.4,17.3333ZM5.6,17.3333Q5.6,18.1894,6.20531,18.7947Q6.81062,19.4,7.66667,19.4L18.3333,19.4Q19.1894,19.4,19.7947,18.7947Q20.4,18.1894,20.4,17.3333L20.4,6.66667Q20.4,5.81062,19.7947,5.20531Q19.1894,4.6,18.3333,4.6L7.66667,4.6Q6.81062,4.6,6.20531,5.20531Q5.6,5.81063,5.6,6.66667L5.6,17.3333Z" fill="#333333" fill-opacity="1"/></g><g transform="matrix(0,-1,1,0,-11,25)"><rect x="7" y="18" width="5" height="12" rx="1" fill="#333333" fill-opacity="1"/></g></g></svg>
              <span class="flex" v-if="showBottomFinacePane">收起底栏</span>
              <span class="flex" v-if="!showBottomFinacePane">打开底栏</span>
          </div>
      </div>

      <div style="display: flex; flex-direction: column; flex:1.5;" v-if="showBottomFinacePane" 
        ref="bottomFinacePaneRef">
          <div >
            <div class="stock-sector-rs" v-if="bottomPane=='rs'">
              <div style="display: flex;padding: .8em; padding-top:.2em;font-size: 13px; flex-direction: column;">
                <div style="display: flex; flex-direction: row;">
                  <div :class="{'flex':true , 'chart-bottom-tab-pane':true, 'active': activeKey=='HalfMonth'}" @click="switchActiveKey('HalfMonth')">半月</div>
                  <div :class="{'flex':true , 'chart-bottom-tab-pane':true, 'active': activeKey=='Month'}" @click="switchActiveKey('Month')">一月</div>
                  <div :class="{'flex':true , 'chart-bottom-tab-pane':true, 'active': activeKey=='Season'}" @click="switchActiveKey('Season')">季度</div>
                  <div :class="{'flex':true , 'chart-bottom-tab-pane':true, 'active': activeKey=='HalfYear'}" @click="switchActiveKey('HalfYear')">半年</div>
                  <div :class="{'flex':true , 'chart-bottom-tab-pane':true, 'active': activeKey=='Year'}" @click="switchActiveKey('Year')">一年</div>
                </div>
                <div class="flex" v-if="visbileRsStrongPane">
                  <LineChart v-bind="config"/>
                </div>
              </div>
            </div>
      
            <div class="finatinal flex" v-if="bottomPane=='fs'" >
              <div style="display: flex;padding: .8em; padding-top:.2em;font-size: 13px; flex-direction: row;width:100%;color:#999;"
              v-if="visbileRsStrongPane">
                <div class="flex" style="flex:1;flex-direction: column;border:1px solid #e5e5e5;padding:5px;border-radius: 5px;">
                  <div style="font-size: 14px;color:#000000;text-indent: .5em;">净利润增长趋势</div>
                  <LineChart v-bind="netProfitChartConfig"/>
                </div>
                <div class="flex" style="flex:1;flex-direction: column;margin-left:.5em;border:1px solid #e5e5e5;padding:5px;border-radius: 5px;">
                  <div style="font-size: 14px;color:#000000;text-indent: .5em;">营收增长趋势</div>
                  <LineChart v-bind="renevueChartConfig"/>
                </div>
                <div class="flex" style="flex:1;flex-direction: column;margin-left: .5em;border:1px solid #e5e5e5;padding:5px;border-radius: 5px;">
                  <div style="font-size: 14px;color:#000000;text-indent: .5em;">利润率变化</div>
                  <ColumnChart v-bind="profitChangeChartConfig"/>
                </div>
              </div>
            </div>
          </div>
      </div>
    </div>

    </div>

  </div>



</template>
<script lang="ts">
  import { TinyLineChart, LineChart, ColumnChart } from '@opd/g2plot-vue'
  import { Popconfirm, Input, Button, Modal, Avatar, Checkbox, TabPane, Tabs, Select } from 'ant-design-vue';
  export default {
    components: {
      AButton: Button,
      AInput: Input,
      ASelect: Select,
      Popconfirm: Popconfirm,
      AModal: Modal,
      AAvatar: Avatar,
      ACheckbox: Checkbox,
      ATabs: Tabs,
      ATabPane: TabPane,
      TinyLineChart,
      LineChart,
      ColumnChart
    },
  };
</script>
<script lang="ts" setup>
import { nextTick } from 'vue';
import { Switch, message, Spin} from 'ant-design-vue';
import { dateFormat, numberFormat, NumberUnit } from './tools'
import { ref, onMounted, onUnmounted, defineProps, h } from 'vue';
import { SearchOutlined, LineChartOutlined, SettingOutlined, FolderViewOutlined, CameraOutlined,FundOutlined,
  InsertRowRightOutlined, CaretLeftOutlined} from '@ant-design/icons-vue';
import { getStockKlineData, getStockRsStrong, getStockPatternData } from '/@/api/stock/klineDataDao';
import { getNetProfitDatas, getRevenueDatas, getGrossProfit } from '/@/api/stock/stockFinaceChartDao';
import { stockInUserStock, deleteUserStock } from '/@/api/stock/userStocksDao';
import { init, dispose, registerOverlay, registerIndicator, registerFigure, TooltipIconPosition } from 'klinecharts'
import calcParamSetting from './calc_param_setting.vue';
import HourChartView from './hour_view.vue';
import {getDateOffsetFormat, getDateOffsetFormat2} from './date_utils';
import { getCurrentUserId } from '../../utils/currentUser.ts';

const candleBarClickTime = ref(-1);
const candlerBarData = ref({});
const hourChartView = ref();
const activeKey = ref('HalfMonth');
const bottomPane = ref('rs');
const visbileRsStrongPane = ref(true);
const showBottomFinacePane = ref(true);
let rsStrongPaneWidth = window.innerWidth * props.widthRate;
let rsStrongPaneHeight = ref(window.innerHeight * 0.25 - 80);
const bottomFinacePaneRef = ref();
const waterPosition = ref('70% 30%');
const settingIconSize = ref('large');

defineExpose({ switchStockKline, disposeChart, scrollToCurrent, changeRsStrongPaneWidth, 
  refreshStockInZixuanStatus, resetSelectIndicators });
const emit = defineEmits(['openStockDrawer','settingChange', 'indicatorChange', 
  'hideStockPane','addStock2SelfPage', 'deleteStock2SelfPage', 'screenShot'])

const props = defineProps({
  stock: {
    type: Object
  },
  settingItems: {
    type: Object
  },
  mainIndicators: {
    type: Object
  },
  widthRate:{
    type: Number
  },
  subIndicators: {
    type: Object
}});

function toggleBottomFinacePane() {
  switchStockKline(currentStock.value);
  showBottomFinacePane.value = !showBottomFinacePane.value;
  nextTick(()=> {
    dispose('chart');
    chart.value = null;
    initChart();
    switchStockKline(currentStock.value);
  });
}

function screenShotEvent(){
  emit('screenShot')
}

function changeRsStrongPaneWidth(drawerVisbile) {
  if(drawerVisbile) {
    rsStrongPaneWidth = window.innerWidth*props.widthRate*0.68;
    waterPosition.value = '52% 30%'
  } else {
    rsStrongPaneWidth = window.innerWidth*props.widthRate;
    waterPosition.value = '70% 30%'
  }
  visbileRsStrongPane.value = false;
  setTimeout(function() {
    config.value.width = rsStrongPaneWidth;
    netProfitChartConfig.value.width=rsStrongPaneWidth/3 - 20;
    renevueChartConfig.value.width = rsStrongPaneWidth/3 - 20;
    profitChangeChartConfig.value.width = rsStrongPaneWidth/3 - 20;
    visbileRsStrongPane.value = true;
  },100);
}

function switchActiveKey(key) {
  activeKey.value = key;
  loadStockRsStrongChartData();
  loadStockFinaceChartData();
}

function switchBottomPane(pane){
  bottomPane.value = pane;
  if(pane=='fs') {
    loadStockFinaceChartData();
  }
}

const config = ref({
    height: rsStrongPaneHeight.value+20,
    width: rsStrongPaneWidth,
    seriesField: 'category',
    style:{
      lineWidth:1
    },
    legend:{
      visible: true,
      position: 'right-top'
    },
    xAxis:{
      visible: false
    },
    yAxis:{
      visible: false
    },
    color: ['#FF0000','#3268FC'],
    xField: 'date',
    yField: 'value',
    data:[]
});


const netProfitChartConfig = ref({
  height: rsStrongPaneHeight.value,
  width: rsStrongPaneWidth/3 - 20,
  title: {
    text: '净利润增长趋势',
  },
  padding: 'auto',
  forceFit: true,
  data:[],
  xField: 'x',
  yField: 'y',
  point: {
    visible: true,
    size: 2,
    shape: 'diamond',
    style: {
      fill: 'white',
      stroke: '#2593fc',
      lineWidth: 1,
    },
  },
  yAxis:{
    label:{
      formatter:(v)=>{
        return v+'%'
      }
    }
  },
  legend: { position: 'top' },
  seriesField: 'category',
  color: ['#3268FC', '#8ccc7e'],
  responsive: true,
  smooth: true,
});

const renevueChartConfig = ref({
  height: rsStrongPaneHeight.value,
  width: rsStrongPaneWidth/3-20,
  title: {
    text: '营收增长趋势',
  },
  point: {
    visible: true,
    size: 2,
    shape: 'diamond',
    style: {
      fill: 'white',
      stroke: '#2593fc',
      lineWidth: 1,
    },
  },
  padding: 'auto',
  forceFit: true,
  data:[],
  xField: 'x',
  yField: 'y',
  yAxis:{
    label:{
      formatter:(v)=>{
        return v+'%'
      }
    }
  },
  legend: { position: 'top' },
  seriesField: 'category',
  color: ['#3268FC', '#8ccc7e'],
  responsive: true,
  smooth: true,
});


const profitChangeChartConfig = ref({
  height: rsStrongPaneHeight.value,
  width: rsStrongPaneWidth/3-20,
  title: {
    text: '营收增长趋势',
  },
  padding: 'auto',
  forceFit: true,
  data:[],
  xField: 'x',
  yField: 'y',
  yAxis:{
    label:{
      formatter:(v)=>{
        return v+'%'
      }
    }
  },
  legend: { position: 'top' },
  groupField: 'category',
  seriesField: 'category',
  color: ['#3268FC', '#8ccc7e'],
  responsive: true,
  isGroup:true,
});

const calcParamSettingPage = ref();

async function loadStockRsStrongChartData() {
  if(currentStock.value.stockCode) {
    let result = await getStockRsStrong({
      'stockCode': currentStock.value.stockCode,
      'period': activeKey.value
    });
    config.value.data = result;
  }
}
/**
 * 获取股票利润率折线图数据
 */
async function loadStockFinaceChartData() {
  if(currentStock.value.stockCode){
    let netProfitDatas = await getNetProfitDatas({
      'stockCode': currentStock.value.stockCode
    });
    let renevueDatas = await getRevenueDatas({
      'stockCode': currentStock.value.stockCode
    });
    let grossDatasDatas = await getGrossProfit({
      'stockCode': currentStock.value.stockCode
    });
    netProfitChartConfig.value.data = netProfitDatas;
    renevueChartConfig.value.data = renevueDatas;
    profitChangeChartConfig.value.data = grossDatasDatas
  }
}

function overideIndicatorParams(indicatorName, calcParams, paneId) {
  showIndicatorSettingModalParams.value = false;
  chart.value?.overrideIndicator({name: indicatorName, calcParams: calcParams}, paneId);
}

function resetBaseSetting(){
  settingItems.value.forEach(data=>{
    data.value = data.defaultValue;
    onSettingChange(data.key, data.value);
  })
}

function changeSettingStatus(value) {
  if(typeof(value)==='object'){
    settingItems.value.forEach(data=> {
      if(data.type=='switch'&&data.key==value.key) {
        data.value = !data.value
        onSettingChange(data.key, data.value);
      }
    })
  } else if(typeof(value)==='string') {
    settingItems.value.forEach(data => {
      if(data.type=='select' && data.options.length>0){
        for(var i=0; i<data.options.length; i++){
          if(value==data.options[i].value){
            data.value = data.options[i].value;
            onSettingChange(data.key, data.value);
            break;
          }
        }
      }
    });
  }
}

function onSettingChange(key, value) {
    let style = {};
    let keys = key.split(".");
    keys.reduce((p, c, i) => {
      if (i === keys.length - 1) {
        p[c] = value;
      } else {
        p[c] = {};
      }
      return p[c];
    }, style);

    chart.value?.setStyles(style);
    emit('settingChange', settingItems.value);
}




const currentPeriod = ref('Day');
const indicatorSetting = ref(false);
const baseSetting = ref(false);
const chart = ref(null);
const dataLoading = ref(true);


const currentStock = ref({
  stockName: '',
  stockCode: '',
  logo: ''
});
const stockInZixuanStatus = ref(false);


const indicatorSettingModalParams = ref([]);
const showIndicatorSettingModalParams = ref(false);
var selectedMainIndicator = ref([]);
var selectedSubIndicator = ref([]);

const pageHeight = ref(0);
const pageWidth = ref(0);

function resetSelectIndicators(selectedIndicators) {
  selectedMainIndicator.value = selectedIndicators;
  if(selectedIndicators.includes('indicator_collects')) {
    removeMainIndicator('indicator_collects');
    addMainIndicator('indicator_collects')
  }
}

onMounted(() => {
  props.mainIndicators?.forEach(element => {
    selectedMainIndicator.value.push(element);
  });
  props.subIndicators?.forEach(element=>{
    selectedSubIndicator.value.push(element);
  })
  props.settingItems?.forEach(element => {
    settingItems.value.push(element);
  });
  candleClickListener();


  registerIndicators();
  registerPatternIndicators();
  currentStock.value = props.stock;


  nextTick(()=> {
    pageHeight.value = window.innerHeight;
    pageWidth.value = window.innerWidth;
    if(pageWidth.value<1380) {
      settingIconSize.value = "normal"
    } else if(pageWidth.value<1300) {
      settingIconSize.value = "small"
    }
    initChart();
    switchStockKline(currentStock.value);
  });

});

onUnmounted(() => {
  dispose('chart');
});

function candleClickListener() {
  document.getElementById('chart')?.addEventListener('click', ()=> {
    let now = Date.now();
    let diff = now - candleBarClickTime.value;
    if(diff>10&&diff<400) {
      hourChartView.value.showModal(candlerBarData.value);
    }
  }, false);
}

function switchPeriod(period){
  currentPeriod.value = period;
  refreshKlineData(currentStock.value.stockCode);
}

function openIndicatorSetting() {
  indicatorSetting.value = true;
}

function cancelIndicatorSetting() {
  indicatorSetting.value = false;
}

function disposeChart() {
  if (chart.value) {
    dispose('chart');
    chart.value = null;
  }
}

function openDrawer() {
  emit('openStockDrawer', currentStock.value.stockCode);

}

function cancelBaseSetting(){
  baseSetting.value = false;
}
function openBaseSetting(){
  baseSetting.value = true;
}


async function switchStockKline(stock) {
  currentStock.value = stock;
  if(currentStock.value.stockCode){
    await refreshKlineData(stock.stockCode);
    loadStockRsStrongChartData();
    loadStockFinaceChartData();
    stockInUserStock({
      "stockCode": currentStock.value.stockCode,
      "userId": getCurrentUserId()
    }).then(value=>{
      stockInZixuanStatus.value = value;
    });
  }
}




const dateRange = ref({
  startDate: getDateOffsetFormat(-365),
  endDate: getDateOffsetFormat(0)
})

/**
 * 加载K线数据
 * 
 * @param stockCode 股票代码
 */
async function refreshKlineData(stockCode) {
  if(!stockCode) {
    return;
  }
  dateRange.value.startDate = getDateOffsetFormat(-365);
  if(currentPeriod.value=='Week') {
    dateRange.value.startDate = getDateOffsetFormat(-1000);
  } else if(currentPeriod.value=='Month') {
    dateRange.value.startDate = getDateOffsetFormat(-36500);
  }
  dateRange.value.endDate = getDateOffsetFormat(0)
  dataLoading.value = true;
  let res = await getStockKlineData({
    stockCode: stockCode,
    period: currentPeriod.value,
    startDate: dateRange.value.startDate,
    endDate: dateRange.value.endDate
  });
  dataLoading.value = false;
  let data = res['data'];
  let resultCode = res['resultCode'];
  let msg = res['msg'];
  if(resultCode=='FAIL'){
    message.error(msg);
    return;
  }

  if (data && data.length > 0) {
    settingItems.value.forEach(data=> {
      onSettingChange(data.key, data.value);
    });
    chart.value?.scrollToDataIndex(chart.value?.getDataList().length - 1);
    chart.value?.applyNewData(data, true);
  }
}

function scrollToCurrent(){
  chart.value?.scrollByDistance(2);
}

function initChart() {
  chart.value = init('chart', {
      customApi: {
        formatDate(_dateTimeFormat: Intl.DateTimeFormat, timestamp, _format: string, _type: FormatDateType) {
          return dateFormat(new Date(timestamp), "yyyy-MM-dd");
        }
      },
      locale: "zh-CN",
      styles: {
        indicator:{
          ohlc:{
            upColor: '#F92855',
            downColor: '#2DC08E',
            noChangeColor: '#888888'
          },
          bars: [{
            style: 'fill',
            borderStyle: 'solid',
            borderSize: 1,
            borderDashedValue: [2, 2],
            upColor: '#F92855',
            downColor: '#2DC08E',
            noChangeColor: '#888888'
          }]
        },
        candle: {
          bar: {
            upColor: '#F92855',
            downColor: '#2DC08E',
            noChangeColor: '#888888',
            upBorderColor: '#F92855',
            downBorderColor: '#2DC08E',
            noChangeBorderColor: '#888888',
            upWickColor: '#F92855',
            downWickColor: '#2DC08E',
            noChangeWickColor: '#888888'
          },
          tooltip: {
            custom: ({current}: { current: any }) => {
              return [
                {title: "time", value: "{time}"},
                {title: "open", value: "{open}"},
                {title: "high", value: "{high}"},
                {title: "low", value: "{low}"},
                {title: "close", value: "{close}"},
                {title: "成交额：", value: numberFormat(current.turnover, 2, NumberUnit.Yi)},
                {title: "换手率：", value: current.turnoverRate + "%"},
                {title: "涨跌幅：", value: current.riseAndFall + "%"}
              ];
            },
          }
        }
      }
    });

    chart.value?.zoomAtCoordinate(2);
    chart.value?.setStyles({
      indicator: {
        tooltip: {
          icons: [
            {
              id: "visible",
              position: TooltipIconPosition.Middle,
              marginLeft: 8,
              marginTop: 2,
              marginRight: 0,
              marginBottom: 0,
              paddingLeft: 0,
              paddingTop: 0,
              paddingRight: 0,
              paddingBottom: 0,
              icon: "\ue903",
              fontFamily: "icomoon",
              size: 14,
              color: "#76808F",
              activeColor: "#76808F",
              backgroundColor: "transparent",
              activeBackgroundColor: "rgba(22, 119, 255, 0.15)"
            },
            {
              id: "invisible",
              position: TooltipIconPosition.Middle,
              marginLeft: 8,
              marginTop: 2,
              marginRight: 0,
              marginBottom: 0,
              paddingLeft: 0,
              paddingTop: 0,
              paddingRight: 0,
              paddingBottom: 0,
              icon: "\ue901",
              fontFamily: "icomoon",
              size: 14,
              color: "#76808F",
              activeColor: "#76808F",
              backgroundColor: "transparent",
              activeBackgroundColor: "rgba(22, 119, 255, 0.15)"
            },
            {
              id: "setting",
              position: TooltipIconPosition.Middle,
              marginLeft: 6,
              marginTop: 2,
              marginBottom: 0,
              marginRight: 0,
              paddingLeft: 0,
              paddingTop: 0,
              paddingRight: 0,
              paddingBottom: 0,
              icon: "\ue902",
              fontFamily: "icomoon",
              size: 14,
              color: "#76808F",
              activeColor: "#76808F",
              backgroundColor: "transparent",
              activeBackgroundColor: "rgba(22, 119, 255, 0.15)"
            },
            {
              id: "close",
              position: TooltipIconPosition.Middle,
              marginLeft: 6,
              marginTop: 2,
              marginRight: 0,
              marginBottom: 0,
              paddingLeft: 0,
              paddingTop: 0,
              paddingRight: 0,
              paddingBottom: 0,
              icon: "\ue900",
              fontFamily: "icomoon",
              size: 14,
              color: "#76808F",
              activeColor: "#76808F",
              backgroundColor: "transparent",
              activeBackgroundColor: "rgba(22, 119, 255, 0.15)"
            }
          ]
        }
      }
    });

    chart.value?.subscribeAction('onCandleBarClick', (data)=> {
      let now = Date.now();
      candleBarClickTime.value = now;
      candlerBarData.value = data;
    });

    chart.value?.subscribeAction('onTooltipIconClick', (data) => {
      if (data.indicatorName) {
        switch (data.iconId) {
          case "visible": {
            chart.value?.overrideIndicator({name: data.indicatorName, visible: true}, data.paneId);
            break;
          }
          case "invisible": {
            chart.value?.overrideIndicator({name: data.indicatorName, visible: false}, data.paneId);
            break;
          }
          case "setting": {
            const indicator = chart.value?.getIndicatorByPaneId(data.paneId, data.indicatorName);
            var settingData = {
              visible: true, 
              indicatorName: data.indicatorName, 
              paneId: data.paneId, 
              calcParams: indicator.calcParams
            }
            indicatorSettingModalParams.value = [settingData];
            showIndicatorSettingModalParams.value = true;
            break;
          }
          case "close": {
            if (data.paneId === "candle_pane") {
              chart.value?.removeIndicator("candle_pane", data.indicatorName);
              selectedMainIndicator.value = [...selectedMainIndicator.value.filter(item=>item!=data.indicatorName)]
            } else {
              chart.value?.removeIndicator(data.paneId, data.indicatorName);
              selectedSubIndicator.value = [...selectedSubIndicator.value.filter(item=>item!=data.indicatorName)]
            }
            break;
          }
          default:
            return;
        }
      }
    });

    chart.value?.setLoadDataCallback(({type, data, callback}) => {
      if(currentPeriod.value=='Day') {
        if (type === 'forward') {
          dateRange.value.endDate = dateRange.value.startDate;
          dateRange.value.startDate = getDateOffsetFormat2(dateRange.value.startDate, -365);
          dataLoading.value = true;
          getStockKlineData({
            stockCode: data.stockCode,
            period: 'Day',
            startDate: dateRange.value.startDate,
            endDate: dateRange.value.endDate
          }).then(res => {
            dataLoading.value = false;
            let data = res['data'];
            let resultCode = res['resultCode'];
            let msg = res['msg'];
            if(resultCode=='FAIL') {
              message.error(msg)
              return;
            }
            callback(data, data.length > 0);
          });
        } else if(type=='backward') {
          if (dateRange.value.endDate === getDateOffsetFormat(0)) {
              callback([], false);
          }
        } else {
          callback([], true);
        }
      } else if(currentPeriod.value=='Week') {
        if (type === 'forward') {
          dateRange.value.endDate = dateRange.value.startDate;
          dateRange.value.startDate = getDateOffsetFormat2(dateRange.value.startDate, -1000);
          dataLoading.value = true;
          getStockKlineData({
            stockCode: data.stockCode,
            period: 'Week',
            startDate: dateRange.value.startDate,
            endDate: dateRange.value.endDate
          }).then(res => {
            dataLoading.value = false;
            let data = res['data'];
            let resultCode = res['resultCode'];
            let msg = res['msg'];
            if(resultCode=='FAIL') {
              message.error(msg)
              return;
            }
            callback(data, data.length > 0);
          });
        } else if(type=='backward') {
          if (dateRange.value.endDate === getDateOffsetFormat(0)) {
              callback([], false);
          }
        } else {
          callback([], true);
        }
      } else {
        callback([], true);
      }
    });

    selectedMainIndicator.value?.forEach(indicator => {
      addMainIndicator(indicator);
    });
    selectedSubIndicator.value?.forEach(indicator => {
      addSubIndicator(indicator)
    });
};


const subIndicatorMap = {};
const mainIndicatorMap = {};

const rsIndicators = [
  { name: "8日 RS", key: "stockWeighted8dRS", color: "#8fcfe8" },
  { name: "半月 RS", key: "stockWeighted12dRS", color: "#11eaca" },
  { name: "1月 RS", key: "stockWeighted24dRS", color: "#f59220" },
  { name: "2月 RS", key: "stockWeighted44dRS", color: "#e738f5" },
  { name: "3月 RS", key: "stockWeighted64dRS", color: "#077ff6" },
  { name: "6月 RS", key: "stockWeighted128dRS", color: "#f80b98" },
  { name: "1年 RS", key: "stockWeighted252dRS", color: "#f54604" },
];

const calculateRs = (dataList, key) => {
  if (!dataList || dataList.length === 0) {
    return [];
  }
  const last = dataList[dataList.length - 1];
  const cycleData = dataList.slice(-200);
  const maxK = Math.max(...cycleData.map(el => el.high));
  const minK = Math.min(...cycleData.map(el => el.low));
  const maxRs = Math.max(...cycleData.filter(el => el[key] > 0).map(el => el[key]));
  const s = Math.min(0.2 * last.low / last[key], (maxK - minK) / maxRs);
  const shift = 0.1 * minK;
  return dataList.map(data => {
    return data[key] === 0 ? data[key] : data[key] * s + minK - shift;
  });
};

function getBzPoint(x1, y1, x2, y2, xOffset) {
  let xl = (y2 - y1) / (x2 - x1);
  let xl2 = -1/xl;
  // let y = xl2*(xOffset) + y1 + (y2 - y1) / 2;
  let y = xl2*(xOffset) + (y1+y2)/2
  return [x1+xOffset, y];
}

function getDateDiff(dataList, patternDate) {
  var i = 0;
  for(i=0; i<dataList.length; i++) {
    let data = dataList[i];
    if(data['timestamp'].indexOf(patternDate)>=0){
      break;
    }
  }
  return i;
};

let lineColor = '#33FF33';

function registerPatternIndicators() {
  if(currentStock.value?.isVcp=='是' || 1>0) {
    registerIndicator({
      name: 'vcp',
      shortName: indicatorMap['vcp'],
      series: 'price',
      precision: 2,
      figures: [
        { key: 'vcp', title: indicatorMap['vcp'], type: 'line' }
      ],
  
      calc: async (dataList, { figures }) => {
        var result = dataList.map(item => {
          return {'vcp': ''};
        });
        return result;
      },
  
      draw(params) {
        const dataList = params.kLineDataList;
        params.ctx.lineWidth = 2;
        params.ctx.font = "12px Verdana";
        params.ctx.strokeStyle = lineColor;
        if (dataList.length === 0) {
          return false;
        }
        params.ctx.setLineDash([]);
        params.ctx.closePath();
        params.ctx.beginPath();
        
        let flag = false;
        let data = dataList[dataList.length -1];
        if(data.h1Date && data.h1 && data.l1 && data.l1Date) {
          let h1x = params.xAxis.convertToPixel(getDateDiff(dataList, data.h1Date));
          let h1y = params.yAxis.convertToPixel(dataList[getDateDiff(dataList, data.h1Date)].high)
  
          params.ctx.moveTo(h1x, h1y);
        }
  
        if(data.l1 && data.l1Date) {
          let l1x = params.xAxis.convertToPixel(getDateDiff(dataList, data.l1Date));
          let l1y = params.yAxis.convertToPixel(dataList[getDateDiff(dataList, data.l1Date)].low);
  
          params.ctx.lineTo(l1x, l1y);
          flag = true;
        }
        
        if(data.h2Date && data.h2) {
  
          let h2x = params.xAxis.convertToPixel(getDateDiff(dataList, data.h2Date));
          let h2y = params.yAxis.convertToPixel(dataList[getDateDiff(dataList, data.h2Date)].high);
  
          params.ctx.lineTo(h2x, h2y);
        }
  
        if(data.l2 && data.l2Date) {
          let l2x = params.xAxis.convertToPixel(getDateDiff(dataList, data.l2Date));
          let l2y = params.yAxis.convertToPixel(dataList[getDateDiff(dataList, data.l2Date)].low);
  
          params.ctx.lineTo(l2x, l2y);
        }
  
  
        if(data.h3Date && data.h3) {
          let h3x = params.xAxis.convertToPixel(getDateDiff(dataList, data.h3Date));
          let h3y = params.yAxis.convertToPixel(dataList[getDateDiff(dataList, data.h3Date)].high);
  
          params.ctx.lineTo(h3x, h3y);
        }
  
        if(data.l3 && data.l3Date) {
          let l3x = params.xAxis.convertToPixel(getDateDiff(dataList, data.l3Date));
          let l3y = params.yAxis.convertToPixel(dataList[getDateDiff(dataList, data.l3Date)].low);
  
          params.ctx.lineTo(l3x, l3y);
        }
        if(flag) {
          params.ctx.stroke()
        }
        params.ctx.closePath();
        return true;
      }
    });
  }

  if(currentStock.value?.isCupAndHandle=='是' || 1>0) {
    registerIndicator({
      name: 'cup_and_handle',
      shortName: indicatorMap['cup_and_handle'],
      series: 'price',
      precision: 2,
      figures: [
        { key: 'cup_and_handle', title: indicatorMap['cup_and_handle'], type: 'line' }
      ],
  
      calc: async (dataList, { figures }) => {
        var result = dataList.map(item => {
          return {'cup_and_handle': ''};
        });
        return result;
      },
  
      draw(params) {
        const dataList = params.kLineDataList;
        params.ctx.lineWidth = 2;
        params.ctx.font = "12px Verdana";
        params.ctx.strokeStyle = lineColor;
        if (dataList.length === 0) {
          return false;
        }
        params.ctx.setLineDash([]);
        params.ctx.closePath();
        params.ctx.beginPath();
        
        let data = dataList[dataList.length -1];
        if(data.h1Date && data.h1 && data.l1 && data.l1Date) {
          let h1x = params.xAxis.convertToPixel(getDateDiff(dataList, data.h1Date));
          let h1y = params.yAxis.convertToPixel(dataList[getDateDiff(dataList, data.h1Date)].high)
  
          params.ctx.moveTo(h1x, h1y);

          let l1x = params.xAxis.convertToPixel(getDateDiff(dataList, data.l1Date));
          let l1y = params.yAxis.convertToPixel(dataList[getDateDiff(dataList, data.l1Date)].low);
          // let bp = getBzPoint(h1x, h1y, l1x, l1y, -20)
  
          // params.ctx.quadraticCurveTo(bp[0],bp[1],l1x, l1y);
          params.ctx.lineTo(l1x, l1y);
          // params.ctx.stroke();

          // params.ctx.moveTo(l1x, l1y);

          if(data.h2Date && data.h2) {
  
            let h2x = params.xAxis.convertToPixel(getDateDiff(dataList, data.h2Date));
            let h2y = params.yAxis.convertToPixel(dataList[getDateDiff(dataList, data.h2Date)].high);
    

            // let bp2 = getBzPoint(l1x, l1y, h2x, h2y, 40);
  
            // params.ctx.quadraticCurveTo(bp2[0],bp2[1],h2x, h2y);
            // params.ctx.stroke();

            // params.ctx.moveTo(h2x, h2y);

            params.ctx.lineTo(h2x, h2y);

            if(data.l2 && data.l2Date) {
              let l2x = params.xAxis.convertToPixel(getDateDiff(dataList, data.l2Date));
              let l2y = params.yAxis.convertToPixel(dataList[getDateDiff(dataList, data.l2Date)].low);
      
              // let bp3 = getBzPoint(h2x, h2y, l2x, l2y, 20);

              // params.ctx.quadraticCurveTo(bp3[0],bp3[1],l2x, l2y);
              // params.ctx.stroke();

              params.ctx.lineTo(l2x, l2y);
            }

          }
        }
        
        if(data.h3Date && data.h3) {
          let h3x = params.xAxis.convertToPixel(getDateDiff(dataList, data.h3Date));
          let h3y = params.yAxis.convertToPixel(dataList[getDateDiff(dataList, data.h3Date)].high);
  
          params.ctx.lineTo(h3x, h3y);
        }
  
        if(data.l3 && data.l3Date) {
          let l3x = params.xAxis.convertToPixel(getDateDiff(dataList, data.l3Date));
          let l3y = params.yAxis.convertToPixel(dataList[getDateDiff(dataList, data.l3Date)].low);
  
          params.ctx.lineTo(l3x, l3y);
        }
        
        params.ctx.stroke()
        params.ctx.closePath();
        return true;
      }
    });
  }
  

  if(currentStock.value?.isTriangle=='是' || 1>0) {
    registerIndicator({
      name: 'triangle',
      shortName: indicatorMap['triangle'],
      series: 'price',
      precision: 2,
      figures: [
        { key: 'triangle', title: indicatorMap['triangle'], type: 'line' }
      ],
  
      calc: async (dataList, { figures }) => {
        var result = dataList.map(item => {
          return {'triangle': ''};
        });
        return result;
      },
  
      draw(params) {
        
        const dataList = params.kLineDataList;
        params.ctx.lineWidth = 2;
        params.ctx.font = "12px Verdana";
        params.ctx.strokeStyle = lineColor;
        if (dataList.length === 0) {
          return false;
        }
        params.ctx.setLineDash([]);
        params.ctx.closePath();
        params.ctx.beginPath();
        
        let flag = false;
        let data = dataList[dataList.length -1];
        if(data.triangleHigh1Date && data.triangleHigh3Date) {
          let h1x = params.xAxis.convertToPixel(getDateDiff(dataList, data.triangleHigh1Date));
          let h1y = params.yAxis.convertToPixel(dataList[getDateDiff(dataList, data.triangleHigh1Date)].high)
  
          params.ctx.moveTo(h1x, h1y);
        }
  
        if(data.triangleHigh3Date) {
          let l1x = params.xAxis.convertToPixel(getDateDiff(dataList, data.triangleHigh3Date));
          let l1y = params.yAxis.convertToPixel(dataList[getDateDiff(dataList, data.triangleHigh3Date)].high);
  
          params.ctx.lineTo(l1x, l1y);
          flag = true;
        }

        if(flag) {
          params.ctx.stroke()
          flag = false;
        }

        if(data.triangleLow1Date && data.triangleLow3Date) {
          let h1x = params.xAxis.convertToPixel(getDateDiff(dataList, data.triangleLow1Date));
          let h1y = params.yAxis.convertToPixel(dataList[getDateDiff(dataList, data.triangleLow1Date)].low)
          params.ctx.moveTo(h1x, h1y);
        }
  
        if(data.triangleLow3Date) {
          let l1x = params.xAxis.convertToPixel(getDateDiff(dataList, data.triangleLow3Date));
          let l1y = params.yAxis.convertToPixel(dataList[getDateDiff(dataList, data.triangleLow3Date)].low);
  
          params.ctx.lineTo(l1x, l1y);
          flag = true;
        }

        if(flag) {
          params.ctx.stroke()
          flag = false;
        }

        params.ctx.closePath();
        return true;
      }
    });
  }
  
  
  if(currentStock.value?.isWedge=='是' || 1>0) {
    registerIndicator({
      name: 'wedge',
      shortName: indicatorMap['wedge'],
      series: 'price',
      precision: 2,
      figures: [
        { key: 'wedge', title: indicatorMap['wedge'], type: 'line' }
      ],
  
      calc: async (dataList, { figures }) => {
        var result = dataList.map(item => {
          return {'wedge': ''};
        });
        return result;
      },
  
      draw(params) {
        
        const dataList = params.kLineDataList;
        params.ctx.lineWidth = 2;
        params.ctx.font = "12px Verdana";
        params.ctx.strokeStyle = lineColor;
        if (dataList.length === 0) {
          return false;
        }
        params.ctx.setLineDash([]);
        params.ctx.closePath();
        params.ctx.beginPath();
        
        let flag = false;
        let data = dataList[dataList.length -1];
        if(data.wedgeHigh1Date && data.wedgeHigh3Date) {
          let h1x = params.xAxis.convertToPixel(getDateDiff(dataList, data.wedgeHigh1Date));
          let h1y = params.yAxis.convertToPixel(dataList[getDateDiff(dataList, data.wedgeHigh1Date)].high)
  
          params.ctx.moveTo(h1x, h1y);
        }
  
        if(data.wedgeHigh3Date) {
          let l1x = params.xAxis.convertToPixel(getDateDiff(dataList, data.wedgeHigh3Date));
          let l1y = params.yAxis.convertToPixel(dataList[getDateDiff(dataList, data.wedgeHigh3Date)].high);
  
          params.ctx.lineTo(l1x, l1y);
          flag = true;
        }

        if(flag) {
          params.ctx.stroke()
          flag = false;
        }

        if(data.wedgeLow1Date && data.wedgeLow3Date) {
          let h1x = params.xAxis.convertToPixel(getDateDiff(dataList, data.wedgeLow1Date));
          let h1y = params.yAxis.convertToPixel(dataList[getDateDiff(dataList, data.wedgeLow1Date)].low)
          params.ctx.moveTo(h1x, h1y);
        }
  
        if(data.wedgeLow3Date) {
          let l1x = params.xAxis.convertToPixel(getDateDiff(dataList, data.wedgeLow3Date));
          let l1y = params.yAxis.convertToPixel(dataList[getDateDiff(dataList, data.wedgeLow3Date)].low);
  
          params.ctx.lineTo(l1x, l1y);
          flag = true;
        }

        if(flag) {
          params.ctx.stroke()
          flag = false;
        }

        params.ctx.closePath();
        return true;
      }
    });
  };


  if(currentStock.value?.isFlag=='是' || 1>0) {
    registerIndicator({
      name: 'flag',
      shortName: indicatorMap['flag'],
      series: 'price',
      precision: 2,
      figures: [
        { key: 'flag', title: indicatorMap['flag'], type: 'line' }
      ],
  
      calc: async (dataList, { figures }) => {
        var result = dataList.map(item => {
          return {'flag': ''};
        });
        return result;
      },
  
      draw(params) {
        
        const dataList = params.kLineDataList;
        params.ctx.lineWidth = 2;
        params.ctx.font = "12px Verdana";
        params.ctx.strokeStyle = lineColor;
        if (dataList.length === 0) {
          return false;
        }
        params.ctx.setLineDash([]);
        params.ctx.closePath();
        params.ctx.beginPath();
        
        let flag = false;
        let data = dataList[dataList.length -1];
        console.log('data:', data)
        if(data.flagPoleStartDate && data.flagPoleEndDate && dataList[getDateDiff(dataList, data.flagPoleStartDate)]) {
          let h1x = params.xAxis.convertToPixel(getDateDiff(dataList, data.flagPoleStartDate));
          let h1y = params.yAxis.convertToPixel(dataList[getDateDiff(dataList, data.flagPoleStartDate)].low)
  
          params.ctx.moveTo(h1x, h1y);
        }
  
        if(data.flagPoleEndDate && dataList[getDateDiff(dataList, data.flagPoleEndDate)]) {
          let l1x = params.xAxis.convertToPixel(getDateDiff(dataList, data.flagPoleEndDate));
          let l1y = params.yAxis.convertToPixel(dataList[getDateDiff(dataList, data.flagPoleEndDate)].high);
  
          params.ctx.lineTo(l1x, l1y);
          flag = true;
        }

        if(data.flagHigh1Date && data.flagHigh1Price) {

          if(data.flagHigh1Date && dataList[getDateDiff(dataList, data.flagHigh1Date)]) {
            let h1x = params.xAxis.convertToPixel(getDateDiff(dataList, data.flagHigh1Date));
            let h1y = params.yAxis.convertToPixel(dataList[getDateDiff(dataList, data.flagHigh1Date)].high)
            params.ctx.lineTo(h1x, h1y);
                
            if(flag) {
              params.ctx.stroke()
              flag = false;
            }
          }
          if(data.flagLow1Date && data.flagLow2Date && dataList[getDateDiff(dataList, data.flagLow1Date)]) {
            console.log('flagLow1', dataList[getDateDiff(dataList, data.flagLow1Date)])
            let h1x = params.xAxis.convertToPixel(getDateDiff(dataList, data.flagLow1Date));
            let h1y = params.yAxis.convertToPixel(dataList[getDateDiff(dataList, data.flagLow1Date)].low)
            params.ctx.moveTo(h1x, h1y);
          }

          if(data.flagLow2Date && dataList[getDateDiff(dataList, data.flagLow2Date)]) {
            let h1x = params.xAxis.convertToPixel(getDateDiff(dataList, data.flagLow2Date));
            let h1y = params.yAxis.convertToPixel(dataList[getDateDiff(dataList, data.flagLow2Date)].low)
            params.ctx.lineTo(h1x, h1y);
            flag = true;
          }
          if(flag) {
            params.ctx.stroke()
            flag = false;
          }

        } else {
          
          if(data.flagLow1Date && dataList[getDateDiff(dataList, data.flagLow1Date)]) {
            let h1x = params.xAxis.convertToPixel(getDateDiff(dataList, data.flagLow1Date));
            let h1y = params.yAxis.convertToPixel(dataList[getDateDiff(dataList, data.flagLow1Date)].low)
            params.ctx.lineTo(h1x, h1y);
          }
    
          if(flag) {
            params.ctx.stroke()
            flag = false;
          }
        }

        params.ctx.closePath();
        return true;
      } 
    });
  };


  if(currentStock.value?.isDoubleBottom=='是' || 1>0) {
    registerIndicator({
      name: 'double_bottom',
      shortName: indicatorMap['double_bottom'],
      series: 'price',
      precision: 2,
      figures: [
        { key: 'double_bottom', title: indicatorMap['double_bottom']+' ', type: 'line' }
      ],
  
      calc: async (dataList, { figures }) => {
        var result = dataList.map(item => {
          return {'double_bottom': ''};
        });
        return result;
      },
  
      draw(params) {
        
        const dataList = params.kLineDataList;
        params.ctx.lineWidth = 2;
        params.ctx.font = "12px Verdana";
        params.ctx.strokeStyle = lineColor;
        if (dataList.length === 0) {
          return false;
        }
        params.ctx.setLineDash([]);
        params.ctx.closePath();
        params.ctx.beginPath();
        
        let flag = false;
        let data = dataList[dataList.length -1];
        if(data.dbPreBottomMaxDate && data.dbFirstBottomDate) {
          let h1x = params.xAxis.convertToPixel(getDateDiff(dataList, data.dbPreBottomMaxDate));
          let h1y = params.yAxis.convertToPixel(dataList[getDateDiff(dataList, data.dbPreBottomMaxDate)].high)
  
          params.ctx.moveTo(h1x, h1y);
        }
  
        if(data.dbFirstBottomDate) {
          let l1x = params.xAxis.convertToPixel(getDateDiff(dataList, data.dbFirstBottomDate));
          let l1y = params.yAxis.convertToPixel(dataList[getDateDiff(dataList, data.dbFirstBottomDate)].close);
  
          params.ctx.lineTo(l1x, l1y);
          flag = true;
        }

        if(data.dbMiddlePeakDate) {
          let l1x = params.xAxis.convertToPixel(getDateDiff(dataList, data.dbMiddlePeakDate));
          let l1y = params.yAxis.convertToPixel(dataList[getDateDiff(dataList, data.dbMiddlePeakDate)].high);
  
          params.ctx.lineTo(l1x, l1y);
        }

        if(data.dbSecondBottomDate) {
          let l1x = params.xAxis.convertToPixel(getDateDiff(dataList, data.dbSecondBottomDate));
          let l1y = params.yAxis.convertToPixel(dataList[getDateDiff(dataList, data.dbSecondBottomDate)].close);
  
          params.ctx.lineTo(l1x, l1y);
        }

        if(data.dbPostPatternMaxDate) {
          let l1x = params.xAxis.convertToPixel(getDateDiff(dataList, data.dbPostPatternMaxDate));
          let l1y = params.yAxis.convertToPixel(dataList[getDateDiff(dataList, data.dbPostPatternMaxDate)].high);
  
          params.ctx.lineTo(l1x, l1y);
        }

        if(flag) {
          params.ctx.stroke()
          flag = false;
        }

        params.ctx.closePath();
        return true;
      }
    });
  };


  if(currentStock.value?.isInverseHs=='是' || 1>0) {
    registerIndicator({
      name: 'inverse_hs',
      shortName: indicatorMap['inverse_hs'],
      series: 'price',
      precision: 2,
      figures: [
        { key: 'inverse_hs', title: indicatorMap['inverse_hs']+' ', type: 'line' }
      ],
  
      calc: async (dataList, { figures }) => {
        var result = dataList.map(item => {
          return {'inverse_hs': ''};
        });
        return result;
      },
  
      draw(params) {
        
        const dataList = params.kLineDataList;
        params.ctx.lineWidth = 2;
        params.ctx.font = "12px Verdana";
        params.ctx.strokeStyle = lineColor;
        if (dataList.length === 0) {
          return false;
        }
        params.ctx.setLineDash([]);
        params.ctx.closePath();
        params.ctx.beginPath();
        
        let flag = false;
        let data = dataList[dataList.length -1];
        if(data.ihsLeftShoulderDate && data.ihsLeftPeakDate) {
          let h1x = params.xAxis.convertToPixel(getDateDiff(dataList, data.ihsLeftShoulderDate));
          let h1y = params.yAxis.convertToPixel(dataList[getDateDiff(dataList, data.ihsLeftShoulderDate)].close)
  
          params.ctx.moveTo(h1x, h1y);
        }
  
        if(data.ihsLeftPeakDate) {
          let l1x = params.xAxis.convertToPixel(getDateDiff(dataList, data.ihsLeftPeakDate));
          let l1y = params.yAxis.convertToPixel(dataList[getDateDiff(dataList, data.ihsLeftPeakDate)].close);
  
          params.ctx.lineTo(l1x, l1y);
          flag = true;
        }

        if(data.ihsHeadDate) {
          let l1x = params.xAxis.convertToPixel(getDateDiff(dataList, data.ihsHeadDate));
          let l1y = params.yAxis.convertToPixel(dataList[getDateDiff(dataList, data.ihsHeadDate)].close);
  
          params.ctx.lineTo(l1x, l1y);
        }

        if(data.ihsRightPeakDate) {
          let l1x = params.xAxis.convertToPixel(getDateDiff(dataList, data.ihsRightPeakDate));
          let l1y = params.yAxis.convertToPixel(dataList[getDateDiff(dataList, data.ihsRightPeakDate)].close);
  
          params.ctx.lineTo(l1x, l1y);
        }

        if(data.ihsRightShoulderDate) {
          let l1x = params.xAxis.convertToPixel(getDateDiff(dataList, data.ihsRightShoulderDate));
          let l1y = params.yAxis.convertToPixel(dataList[getDateDiff(dataList, data.ihsRightShoulderDate)].close);
  
          params.ctx.lineTo(l1x, l1y);
        }

        if(flag) {
          params.ctx.stroke()
          flag = false;
        }

        params.ctx.closePath();
        return true;
      }
    });
  };


    registerIndicator({
      name: 'support',
      shortName: '支撑压力',
      series: 'price',
      precision: 2,
      figures: [
        { key: 'support', title: '支撑压力: ', type: 'line' }
      ],
  
      calc: async (dataList, { figures }) => {
        var result = dataList.map(item => {
          return {'support': ''};
        });
        return result;
      },
  
      draw(params) {
        
        const dataList = params.kLineDataList;
        params.ctx.lineWidth = 1;
        params.ctx.font = "12px Verdana";
        params.ctx.strokeStyle = 'red';
        params.ctx.fillStyle='red'
        if (dataList.length === 0) {
          return false;
        }
        params.ctx.font='12px SimHei'
        params.ctx.setLineDash([]);
        params.ctx.closePath();
        params.ctx.beginPath();

        let cc = {
          's1y': -1,
          's2y': -1,
          's3y': -1
        }
        
        let data = dataList[dataList.length -1];
        let len = dataList.length;
        if(data.supportDate1 && dataList[getDateDiff(dataList, data.supportDate1)]) {
          let h1x = params.xAxis.convertToPixel(getDateDiff(dataList, data.supportDate1)-10);
          let h1y = params.yAxis.convertToPixel(data.supportPrice1)
  
          params.ctx.moveTo(h1x, h1y);

          let h2x = params.xAxis.convertToPixel(len-1)+20;
  
          params.ctx.lineTo(h2x, h1y);
          params.ctx.fillText("支撑位("+data.supportPrice1+")", h2x, h1y);
          cc.s1y = h1y;
        }
        params.ctx.stroke() 
        params.ctx.closePath();

        params.ctx.beginPath();
        if(data.supportDate2 && dataList[getDateDiff(dataList, data.supportDate2)]) {
          let h1x = params.xAxis.convertToPixel(getDateDiff(dataList, data.supportDate2)-10);
          let h1y = params.yAxis.convertToPixel(data.supportPrice2)
  
          params.ctx.moveTo(h1x, h1y);

          let h2x = params.xAxis.convertToPixel(len-1) + 20;
  
          params.ctx.lineTo(h2x, h1y);
          if(cc.s1y!=-1 && Math.abs(h1y - cc.s1y)<10) {
            params.ctx.fillText("支撑位("+data.supportPrice2+")", h2x, h1y); 
          } else {
            params.ctx.fillText("支撑位("+data.supportPrice2+")", h2x, h1y);
          }
          
        }

        params.ctx.stroke() 
        params.ctx.closePath();
        
        params.ctx.beginPath();
        if(data.resistanceDate1 && dataList[getDateDiff(dataList, data.resistanceDate1)]) {
           params.ctx.strokeStyle = 'green';
          let h1x = params.xAxis.convertToPixel(getDateDiff(dataList, data.resistanceDate1)-10);
          let h1y = params.yAxis.convertToPixel(data.resistancePrice1)
  
          params.ctx.moveTo(h1x, h1y);

          let h2x = params.xAxis.convertToPixel(len-1) + 20;
  
          params.ctx.lineTo(h2x, h1y);
          params.ctx.fillText("压力位("+data.resistancePrice1+")", h2x, h1y);
        }

        params.ctx.stroke() 
        params.ctx.closePath();
        
        params.ctx.beginPath();

        if(data.resistanceDate2  && dataList[getDateDiff(dataList, data.resistanceDate2)]) {
           params.ctx.strokeStyle = 'green';
          let h1x = params.xAxis.convertToPixel(getDateDiff(dataList, data.resistanceDate2)-10);
          let h1y = params.yAxis.convertToPixel(data.resistancePrice2)
  
          params.ctx.moveTo(h1x, h1y);

          let h2x = params.xAxis.convertToPixel(len-1) + 20;
  
          params.ctx.lineTo(h2x, h1y);
          params.ctx.fillText("压力位("+data.resistancePrice2+")", h2x, h1y);

        }

        params.ctx.stroke()
        params.ctx.closePath();
        return true;
      }
    });
}
/**
 * 注册指标
 * @param item 
 */
function registerIndicators() {
  rsIndicators.forEach(item => {
    registerIndicator({
      name: item.key,
      shortName: item.name,
      precision: 0,
      calc: async (dataList, { figures }) => {
        var result = calculateRs(dataList, item.key).map(item => {
          const result = {};
          figures.forEach(fig => {
            result[fig.key] = item;
          });
          return result;
        });
        return result;
      },
      figures: [
        {
          key: item.key,
          title: item.name,
          type: "line"
        }
      ],
      styles: {
        lines: [
          {
            color: item.color,
            size: 1,
            smooth: false,
            style: 'solid',
            dashedValue: [5, 5]
          }
        ]
      },
      // createTooltipDataSource: async (crosshair) => {
      //   return {
      //     name: item.name + "-- ",
      //     values: [
      //       {
      //         title: {
      //           text: item.name + "-- ",
      //           color: item.color
      //         },
      //         value: {
      //           text: crosshair.kLineData[item.key],
      //           color: item.color
      //         }
      //       }
      //     ],
      //     calcParamsText: "",
      //     icons: []
      //   };
      // },
      draw(params) {
        const dataList = calculateRs(params.kLineDataList, item.key);
        params.ctx.fillStyle = item.color;
        params.ctx.lineWidth = 1;
        params.ctx.lineDashOffset = 0;
        params.ctx.setLineDash([5, 0]);
        params.ctx.strokeStyle = item.color;
        if (dataList.length === 0) {
          return false;
        }
        params.ctx.closePath();
        params.ctx.beginPath();
        params.ctx.moveTo(params.xAxis.convertToPixel(0), params.yAxis.convertToPixel(dataList[0]));
        dataList.forEach((element, i) => {
          if (element === 0 || (element !== 0 && i > 0 && dataList[i - 1] === 0)) {
            params.ctx.moveTo(params.xAxis.convertToPixel(i), params.yAxis.convertToPixel(element));
          } else {
            params.ctx.lineTo(params.xAxis.convertToPixel(i), params.yAxis.convertToPixel(element));
          }
          if (i === dataList.length - 1) {
            params.ctx.stroke();
            params.ctx.fillText("RS" + Math.round(params.kLineDataList.at(-1)?.[item.key]), params.xAxis.convertToPixel(dataList.length - 1), params.yAxis.convertToPixel(element));
          }
        });
        return true;
      }
    });
  })
}


/**
 * 添加主指标
 */
function addMainIndicator(name) {
  const config = rsIndicators.find(item => item.key === name);
  var item;
  if(config) {
    item = chart.value?.createIndicator({
      name: config.key,
      createTooltipDataSource: ({ indicator, defaultStyles, crosshair }) => {
        const icons = [];
        if (indicator.visible) {
          icons.push(defaultStyles.tooltip.icons[1]);
          if (indicator.calcParams.length > 0) {
            icons.push(defaultStyles.tooltip.icons[2]);
          }
          icons.push(defaultStyles.tooltip.icons[3]);
        } else {
          icons.push(defaultStyles.tooltip.icons[0]);
          if (indicator.calcParams.length > 0) {
            icons.push(defaultStyles.tooltip.icons[2]);
          }
          icons.push(defaultStyles.tooltip.icons[3]);
        }
        return {
          icons,
          values: config ? [
            {
              title: {
                text: config?.name + ": ",
                color: config?.color
              },
              value: {
                text: Math.round(crosshair.kLineData?.[name]) + "",
                color: config?.color
              }
            }
          ] : undefined,
        };
      }
    }, true, { id: 'candle_pane' });
    mainIndicatorMap[name] = item;
  } else {
    if(name=='indicator_collects') {
      let indicatorKey = '';
      if(currentStock.value.isVcp=='是') {
        indicatorKey = 'vcp';
      }
      if(currentStock.value.isCupAndHandle=='是') {
        indicatorKey = 'cup_and_handle';
      }
      if(currentStock.value.isCupAndHandle=='是') {
        indicatorKey = 'cup_and_handle';
      }
      if(currentStock.value.isTriangle=='是') {
        indicatorKey = 'triangle';
      }
      if(currentStock.value.isWedge=='是') {
        indicatorKey = 'wedge';
      }
      if(currentStock.value.isFlag=='是') {
        indicatorKey = 'flag';
      }
      if(currentStock.value.isDoubleBottom=='是') {
        indicatorKey = 'double_bottom';
      }
      if(currentStock.value.isInverseHs=='是') {
        indicatorKey = 'inverse_hs';
      }
      if(indicatorKey) {
        let item = chart.value?.createIndicator(indicatorKey, true, {id: 'candle_pane'});
        mainIndicatorMap[indicatorKey] = item;
      }
    } else {
      item = chart.value?.createIndicator(name, true, {id: 'candle_pane'});
      mainIndicatorMap[name] = item;
    }
  }

  if (!selectedMainIndicator.value.includes(name)) {
    selectedMainIndicator.value.push(name);
  }
}

/**
 * 添加副指标
 */
function addSubIndicator(indicatorName) {
  var indicator;
  let subHeight = (pageHeight.value / 9).toFixed(0);
  if(indicatorName==='VOL') {
    indicator = chart.value?.createIndicator({name:indicatorName,calcParams:[50]},true,{height:parseInt(subHeight)});
  } else {
    indicator = chart.value?.createIndicator(indicatorName,true,{height:parseInt(subHeight)});
  }
  subIndicatorMap[indicatorName] = indicator;
  if (!selectedSubIndicator.value.includes(indicatorName)) {
    selectedSubIndicator.value.push(indicatorName);
  }
}

/**
 * 删除副指标
 * @param indicatorName 
 */
function removeSubIndicator(indicatorName) {
  chart.value?.removeIndicator(subIndicatorMap[indicatorName]);
  subIndicatorMap[indicatorName] = null;
}

function removeMainIndicator(indicatorName) {
  let indicators = ['vcp','cup_and_handle','triangle','wedge', 'flag', 'double_bottom', 'inverse_hs']
  if(indicatorName=='indicator_collects') {
    for(let indicatorName_ of indicators) {
      chart.value?.removeIndicator('candle_pane', indicatorName_);
      mainIndicatorMap[indicatorName_] = null;
    }
  } else {
    chart.value?.removeIndicator('candle_pane', indicatorName);
    mainIndicatorMap[indicatorName] = null;
  }
}

const settingItems = ref([]);

const mainIndicator = [
  "MA", "EMA", "SMA", "BOLL", "SAR", "BBI",
  "stockWeighted8dRS",
  "stockWeighted12dRS",
  "stockWeighted24dRS",
  "stockWeighted44dRS",
  "stockWeighted64dRS",
  "stockWeighted128dRS",
  "stockWeighted252dRS",
  // "vcp",
  // "cup_and_handle",
  // "triangle",
  // "wedge",
  // "flag",
  // "double_bottom",
  // "inverse_hs",
  "support",
  "indicator_collects"
];


const subIndicator = [
  "MA", "EMA", "VOL", "MACD", "BOLL", "KDJ",
  "RSI", "BIAS", "BRAR", "CCI", "DMI",
  "CR", "PSY", "DMA", "TRIX", "OBV",
  "VR", "WR", "MTM", "EMV", "SAR",
  "SMA", "ROC", "PVT", "BBI", "AO"
];

const indicatorMap: Record<string, string> = {
  "ma": "MA(移动平均线)",
  "ema": "EMA(指数平滑移动平均线)",
  "sma": "SMA",
  "boll": "BOLL(布林线)",
  "bbi": "BBI(多空指数)",
  "sar": "SAR(停损点指向指标)",
  "vol": "VOL(成交量)",
  "macd": "MACD(指数平滑异同移动平均线)",
  "kdj": "KDJ(随机指标)",
  "rsi": "RSI(相对强弱指标)",
  "bias": "BIAS(乖离率)",
  "brar": "BRAR(情绪指标)",
  "cci": "CCI(顺势指标)",
  "dmi": "DMI(动向指标)",
  "cr": "CR(能量指标)",
  "psy": "PSY(心理线)",
  "dma": "DMA(平行线差指标)",
  "trix": "TRIX(三重指数平滑平均线)",
  "obv": "OBV(能量潮指标)",
  "vr": "VR(成交量变异率)",
  "wr": "WR(威廉指标)",
  "mtm": "MTM(动量指标)",
  "emv": "EMV(简易波动指标)",
  "roc": "ROC(变动率指标)",
  "pvt": "PVT(价量趋势指标)",
  "ao": "AO(动量震荡指标)",
  "stockweighted8drs": "8日 RS",
  "stockweighted12drs": "半月 RS",
  "stockweighted24drs": "1月 RS",
  "stockweighted44drs": "2月 RS",
  "stockweighted64drs": "3月 RS",
  "stockweighted128drs": "6月 RS",
  "stockweighted252drs": "1年 RS",
  "vcp": "VCP",
  "cup_and_handle": '杯柄',
  "triangle": "收敛三角形",
  "wedge": "下降楔形",
  "flag": "看涨旗形",
  "double_bottom": "双底",
  "inverse_hs": "头肩底",
  "indicator_collects": "形态",
  "support": "支撑压力位"
};



const selectIndicator = (item, isSub) => {
  if (isSub) {
    if (!selectedSubIndicator.value.includes(item)) {
      selectedSubIndicator.value.push(item);
      onIndicatorChange(item, false, true)
    } else {
      var items = selectedSubIndicator.value.filter(i => i !== item);
      selectedSubIndicator.value.splice(0, selectedSubIndicator.value.length);
      for (var i in items) {
        selectedSubIndicator.value.push(items[i]);
      }
      onIndicatorChange(item, true, true)
    }
  } else {
    if (!selectedMainIndicator.value.includes(item)) {
      selectedMainIndicator.value.push(item);
      onIndicatorChange(item, false, false);
    } else {
      var items = selectedMainIndicator.value.filter(i => i !== item);
      selectedMainIndicator.value.splice(0, selectedMainIndicator.value.length);
      for (var i in items) {
        selectedMainIndicator.value.push(items[i]);
      }
      onIndicatorChange(item, true, false);
    }
  }
};

/**
 * 指标设置
 * @param indicator 
 * @param isDel 
 * @param isSub 
 */
function onIndicatorChange(indicator: string, isDel?: boolean, isSub?: boolean) {
  if (isSub) {
    if (isDel) {
      removeSubIndicator(indicator);
    } else {
      addSubIndicator(indicator)
    }
  } else {
    if (isDel) {
      removeMainIndicator(indicator);
    } else {
      addMainIndicator(indicator)
    }
  }
  emit('indicatorChange', indicator, isDel, isSub);
};

function hideStockPaneEvent() {
  emit('hideStockPane');
}

function addStock2SelfPageEvent() {
  emit('addStock2SelfPage');
}
function deleteStock2SelfPageEvent() {
  emit('deleteStock2SelfPage');
  stockInZixuanStatus.value = false;
}

function refreshStockInZixuanStatus() {
  stockInUserStock({
      "stockCode": currentStock.value.stockCode,
      "userId": getCurrentUserId()
    }).then(value=>{
      stockInZixuanStatus.value = value;
    });
}
</script>

<style scoped>
.period {
  margin-left: .5em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.period>span {
  line-height: 21px;
  display: flex;
  display: inline-block;
  font-weight: 400;
  white-space: nowrap;
  text-align: center;
  height: 21px;
  width: 26px;
  margin: 0 .2em;
  border-radius: 6px;
  cursor: pointer;
}

.period>span.active {
  background-color: #d0dcfc;
}

.k-line-name {
  font-size: 15px;
  font-weight: 700;
  margin: 0 10px;
  padding-right: 5px;
  border-right: 1px solid #e5e5e5;
  height: 20px;
  margin-top: 12px;
}

.k-line-setting {
  display: flex;
  align-items: center;
}

.k-line-setting>.ant-btn {
  border: 0;
  padding: 4px 8px;
}

.inticator-list {
  padding: 24px;
  max-height: 450px;
  overflow-y: scroll;
}

.inticator-label {
  margin: 0 .5em;
  margin-top: 1em;
}

.inticator-list .indicator {
  padding: .3em 0;
}

.setting-splitter {
  font-size: 15px;
  font-weight: 700;
  margin: 0 10px;
  padding-right: 10px;
  border-right: 1px solid #f0f0f0;
  height: 20px;
  margin-top: 12px;
}

.chart-bottom-btn {
  height: 28px;
  border-radius: 4px;
  opacity: 1;
  padding: 0px 16px;
  color:#212123;
  background: #F2F2F2;
  font-family: Roboto;
  font-size: 12px;  
}
.chart-bottom-btn.active {
  color:#025FFF;
  background: #E9EFFF;
  font-weight: bold;
}
.chart-bottom-tab-pane {
  margin-right: 1em;
  cursor: pointer;
  font-weight: 600;
  font-family: Roboto;
  font-size: 13px;
  margin-left:.5em;
  font-weight: normal;
  line-height: 18px;
  letter-spacing: 0px;
  padding-bottom: 2px;
  transition: border .5s g;

}
.chart-bottom-tab-pane.active {
  border-bottom: 3px solid #3270EB;
  font-weight: 600;
}

.addUserStock:hover {
  color: #255fff;
}

.addUserStock:hover svg {
  fill: #025fff;
}

.deleteUserStock:hover {
  color: #e24a4a;
  cursor: pointer;
}

.deleteUserStock:hover svg {
  fill: #e24a4a;
}

.stock-name-area {
  margin-left: .5em;
  font-weight: 700;
}

.remove-selec-stock-label {
  margin-left: 3px;
}

.add-selec-stock-label {
  margin-left: 3px;
}
.stock-logo {
  width:24px;
  height: 24px; 
  margin-top: 14px;
}

@media screen and (max-width: 1228px) {
  .stock-name-area {
    display: none ; 
  }
  .remove-selec-stock-label {
    display: none;
  }

  .setting-splitter{
    padding-right: 0 !important;
    margin-left: 0;
    margin-right: 0;
  }
  .stock-logo {
    display: none;
  } 
  .k-line-name{
    display: none !important;
  }
  .finace-pane {
    display: none;
  }

}

@media screen and (min-width: 1228px) {
  .stock-name-area {
    display: none ; 
  }
  .remove-selec-stock-label {
    display: none;
  }

  .setting-splitter{
    padding-right: 0 !important;
    margin-left: 0;
    margin-right: 0;
  }
  .stock-logo {
    display: none;
  } 
  .k-line-name{
    display: none !important;
  }
  
  .finace-pane {
    display: none;
  }
}

@media screen and (min-width: 1380px) {
  .stock-name-area {
    display: none ; 
  }
  .remove-selec-stock-label {
    display: none;
  }
  .setting-splitter{
    padding-right: 0 !important;
    margin-left: 0;
    margin-right: 0;
  }
  .stock-logo {
    display: inline-block;
  } 
  .finace-pane {
    display: block;
  }

}

@media screen and (min-width: 1520px) {
  .stock-name-area {
    display: inline-block; 
  }
  .remove-selec-stock-label {
    display: inline-block;
  }
  .add-selec-stock-label {
    display: inline-block;
  }
  .stock-logo {
    display: inline-block;
  } 
  .finace-pane {
    display: block;
  }
}

@media screen and (min-width: 1680px) {
  .stock-name-area {
    display: inline-block; 
  }
  .remove-selec-stock-label {
    display: inline-block;
  }
  .add-selec-stock-label {
    display: inline-block;
  }
  .stock-logo {
    display: inline-block;
  } 
  .finace-pane {
    display: block;
  }
}

@media screen and (min-width: 1900px) {
  .stock-name-area {
    display: inline-block; 
  }
  .remove-selec-stock-label {
    display: inline-block;
  }
  .add-selec-stock-label {
    display: inline-block;
  }
  .stock-logo {
    display: inline-block;
  } 
  .finace-pane {
    display: block;
  }
}

.watermark {
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  line-height: 600px;
  padding-top: 100px;
  z-index: 9990;
  pointer-events: none;
  font-size: 120px;
  font-weight: 700;
  text-align: center;
  color: rgba(0, 0, 0, 0.06);
  transform-origin: center;
  background-image: url('/@/assets/icons/deecp-logo.svg');
  background-repeat: no-repeat;
  background-size: 50% 50%;
  opacity: .35;
}

</style>
